<template>
  <div class="table2">
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="props.form"
      label-width="120px"
    >
      <el-form-item label="赠送积分：" prop="giftPoint">
        <el-input v-model="props.form.giftPoint" />
      </el-form-item>
      <el-form-item label="赠送成长值：" prop="giftGrowth">
        <el-input v-model="props.form.giftGrowth" />
      </el-form-item>
      <el-form-item label="积分购买限制：" prop="usePointLimit">
        <el-input v-model="props.form.usePointLimit" />
      </el-form-item>

      <el-form-item label="预告商品：">
        <el-switch v-model="props.form.previewStatus" />
      </el-form-item>
      <el-form-item label="商品上架：">
        <el-switch v-model="props.form.publishStatus" />
      </el-form-item>
      <el-form-item label="商品推荐：">
        新品 &emsp;<el-switch v-model="props.form.newStatus" />&emsp; 推荐&emsp;
        <el-switch v-model="props.form.recommandStatus" />
      </el-form-item>
      <el-form-item label="服务保证：">
        <el-checkbox-group v-model="props.form.serviceIds">
          <el-checkbox label="无忧退货" />
          <el-checkbox label="快速退款" />
          <el-checkbox label="免费包邮" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="详细页标题：">
        <el-input v-model="props.form.detailTitle" />
      </el-form-item>
      <el-form-item label="详细页描述：">
        <el-input v-model="props.form.detailDesc" />
      </el-form-item>
      <el-form-item label="商品关键字：">
        <el-input v-model="props.form.keywords" />
      </el-form-item>
      <el-form-item label="商品备注：">
        <el-input type="textarea" v-model="props.form.note" />
      </el-form-item>
      <el-form-item label="选择优惠方式：">
        <el-radio-group
          v-model="props.form.prefrenceAreaProductRelationList"
          size="small"
        >
          <el-radio-button label="无优惠" />
          <el-radio-button label="特惠促销" />
          <el-radio-button label="会员价格" />
          <el-radio-button label="阶梯价格" />
          <el-radio-button label="满减价格" />
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('changeStep', -1)"
          >上一步，填写商品信息</el-button
        >
        <el-button type="primary" @click="next">下一步，填写商品属性</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { reactive, ref } from "vue";

// 路由
const router = useRouter();
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
interface Props {
  form: IAddProductParams;
}
// 接受父组件的值
const props = withDefaults(defineProps<Props>(), {
  form: () => ({
    name: "",
  }),
});

// 验证是否为正整数
const isInteger = (rule: any, value: any, callback: (i?: any) => any) => {
  if (!/(^[1-9]\d*$)/.test(value)) {
    callback(new Error("请输入正整数"));
  } else {
    callback();
  }
};

// 校验规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  subTitle: [{ required: true, message: "请输入商品副标题", trigger: "blur" }],
  productCategoryId: [
    { required: true, message: "请输入优惠卷名称", trigger: "blur" },
  ],
  brandId: [{ required: true, message: "请选择商品品牌", trigger: "blur" }],
  publishCount: [
    {
      required: true,
      trigger: "blur",
      validator: isInteger,
    },
  ],
  price: [
    {
      required: true,
      trigger: "blur",
      validator: isInteger,
    },
  ],
  originalPrice: [
    {
      required: true,
      trigger: "blur",
      validator: isInteger,
    },
  ],
  unit: [
    {
      required: true,
      trigger: "blur",
      validator: isInteger,
    },
  ],
  weight: [
    {
      required: true,
      trigger: "blur",
      validator: isInteger,
    },
  ],
  minPoint: [
    {
      required: true,
      validator: isInteger,
      trigger: "change",
    },
  ],
});

const next = async (formEl: FormInstance | undefined) => {
  // console.log(props.form);
  emit("changeStep", 1);
  // props.form.brandId = cascaderVal.value[cascaderVal.value.length - 1];
  // props.form.productCategoryId = BrandVal.value;
  // if (!formEl) return;
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     emit("changeStep", 1);
  //   } else {
  //   }
  // });
};

// 接受父组件的方法
const emit = defineEmits(["changeStep"]);
</script>
<style scoped lang="less">
:deep(.el-form) {
  width: 70%;
  // background-color: #fac;
}
</style>
